<template>
  <div id="app"> 
          <!-- 头部年份 -->
    <div class="header">
      <div class="year-item" v-for="(year, index) in years" :index="index" :key="key">
        {{year}}
      </div>
    </div>
          <!-- 月份选择 -->
      <div class="month-container">
        <div id="month-item-id" class="month-item" v-for="(month, monthIndex) in months" :index="monthIndex" :key="key">
          <div style="background: red;">{{month}}
          </div>
        </div>
      </div>
      <div style="margin-left: 10px; font-size: 15px; color: #acacac;">请填写联系方式</div>
      <div style="background: white; height: 40px;">
        <input type="number" style="height: 100%; margin-left: 10px; font-size: 15px;" placeholder="请输入手机号码">
      </div>
      <div class="footer">

      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      years: [
        '2018',
        '2019',
        '2020'
      ],
      months: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ]
    }
  }
}
</script>

<style>

.header {
  display: flex;
  justify-content: center;
  height: 40px;
}

.year-item {
  flex-grow: 1;
  line-height: 40px;
  text-align: center;
  background: white;
}

.month-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  justify-content: space-between;
}

.month-item {
  width: 24%;
  height: 20vw;
  line-height: 1;
  text-align: center;
  background: white;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 40px;
  background: red;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f0f0f0;
}

</style>
